<template>
  <div class="nex_content">
    <block v-if="[1, 2].includes(nexDetail?.nex_status)">
      <div class="flex_row_space">
        <div class="flex_row">
          <span class="dollor">$</span>
          <span class="money">{{ nexDetail?.percent_price }}</span>
          <div class="ml-[8px]">
            <div class="des_text flex_row">
              <div class="off_view">{{ nexDetail?.percent_off }} Off</div>
              <span class="ml-[4px]">Retail price:</span>
              <span class="retail_price ml-[2px]">${{ nexDetail?.retail_price }}</span>
            </div>
            <div class="des_text">Shipping and tax calculated at checkout</div>
          </div>
          <div
            v-if="nexDetail?.nex_status === 1"
            @click="buyNow('NEX')"
            v-hover-gradient
            class="nex_btn cursor ml-[24px]">
            <span>Nex</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none">
              <path
                d="M18.4795 9.26062C17.8988 7.71887 17.0521 6.29096 15.9778 5.04187C14.1187 2.88984 11.6742 1.5 9.75 1.5C9.63558 1.50009 9.5227 1.52635 9.42 1.57678C9.3173 1.6272 9.22749 1.70046 9.15746 1.79094C9.08743 1.88142 9.03903 1.98673 9.01596 2.09879C8.99289 2.21086 8.99577 2.32672 9.02437 2.4375C9.67453 4.92188 8.32688 6.98766 6.90047 9.17438C5.71875 10.9856 4.5 12.8564 4.5 15C4.5 19.1353 7.86469 22.5 12 22.5C16.1353 22.5 19.5 19.1353 19.5 15C19.5 12.9703 19.1569 11.0395 18.4795 9.26062ZM13.5155 19.6261C13.0312 20.1417 12.4242 20.25 12 20.25C11.5758 20.25 10.9688 20.1417 10.4845 19.6261C10.0003 19.1105 9.75 18.2925 9.75 17.25C9.75 16.0716 10.1634 15.1744 10.5628 14.3072C10.7948 13.8038 11.0316 13.2914 11.1722 12.743C11.1871 12.6833 11.2165 12.6282 11.2577 12.5826C11.2989 12.537 11.3508 12.5022 11.4086 12.4813C11.4664 12.4604 11.5285 12.4541 11.5894 12.4628C11.6503 12.4716 11.7081 12.4952 11.7577 12.5316C12.1864 12.8633 12.5676 13.2522 12.8906 13.6875C13.7423 14.8125 14.25 16.1447 14.25 17.25C14.25 18.2925 13.9959 19.1142 13.5155 19.6261Z"
                fill="white" />
            </svg>
          </div>
          <div v-else-if="nexDetail?.nex_status === 2" class="coming_soon cursor ml-[24px]">
            <span>Coming soon</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none">
              <path
                d="M20.5954 8.13393C20.4671 8.00057 20.3144 7.89482 20.1462 7.82278C19.9779 7.75075 19.7975 7.71387 19.6154 7.71429H16.8461V7C16.8461 5.67392 16.3356 4.40215 15.4267 3.46447C14.5179 2.52678 13.2853 2 12 2C10.7147 2 9.48208 2.52678 8.57325 3.46447C7.66442 4.40215 7.15384 5.67392 7.15384 7V7.71429H4.38461C4.01739 7.71429 3.66521 7.8648 3.40554 8.13271C3.14588 8.40061 3 8.76398 3 9.14286V18.7857C3 20.5268 4.42788 22 6.11538 22H17.8846C18.7009 22.0003 19.4848 21.671 20.0688 21.0826C20.3627 20.7933 20.5968 20.4456 20.7568 20.0604C20.9168 19.6752 20.9996 19.2606 21 18.8415V9.14286C21.0006 8.95544 20.9651 8.76977 20.8956 8.59659C20.8262 8.42341 20.7242 8.26615 20.5954 8.13393ZM8.53846 7C8.53846 6.0528 8.90316 5.14439 9.55232 4.47462C10.2015 3.80485 11.0819 3.42857 12 3.42857C12.9181 3.42857 13.7985 3.80485 14.4477 4.47462C15.0968 5.14439 15.4615 6.0528 15.4615 7V7.71429H8.53846V7ZM16.8461 11.2857C16.8461 12.6118 16.3356 13.8836 15.4267 14.8212C14.5179 15.7589 13.2853 16.2857 12 16.2857C10.7147 16.2857 9.48208 15.7589 8.57325 14.8212C7.66442 13.8836 7.15384 12.6118 7.15384 11.2857V10.5714C7.15384 10.382 7.22678 10.2003 7.35662 10.0664C7.48645 9.9324 7.66254 9.85714 7.84615 9.85714C8.02976 9.85714 8.20585 9.9324 8.33569 10.0664C8.46552 10.2003 8.53846 10.382 8.53846 10.5714V11.2857C8.53846 12.2329 8.90316 13.1413 9.55232 13.8111C10.2015 14.4809 11.0819 14.8571 12 14.8571C12.9181 14.8571 13.7985 14.4809 14.4477 13.8111C15.0968 13.1413 15.4615 12.2329 15.4615 11.2857V10.5714C15.4615 10.382 15.5345 10.2003 15.6643 10.0664C15.7941 9.9324 15.9702 9.85714 16.1538 9.85714C16.3375 9.85714 16.5135 9.9324 16.6434 10.0664C16.7732 10.2003 16.8461 10.382 16.8461 10.5714V11.2857Z"
                fill="white" />
            </svg>
          </div>
        </div>
        <div class="flex_row cursor" @click="dialogVisible = true">
          <div
            v-for="(item, index) in nex_user"
            :key="item.uid"
            :class="index !== 0 && 'ml-[-6px]'">
            <div v-if="item.isShowNum" class="num_view">{{ item.name }}</div>
            <img v-else class="avatar" :src="item.avatar" alt="" />
          </div>
        </div>
      </div>
      <div class="progress_container">
        <div class="progress_bg">
          <div class="progress_fill" :style="{ width: `${progress}%` }"></div>
          <block v-if="nexDetail?.nex_status === 1">
            <img
              v-if="progress !== 100"
              class="process_icon"
              :style="{ left: `${progress <= 95 ? progress : progress - 3}%` }"
              src="@/assets/detail/process.png"
              alt="" />
          </block>
          <div v-else-if="nexDetail?.nex_status === 2" class="progress_success">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none">
              <path
                d="M8.3976 10.4329C8.26866 10.4424 8.13849 10.4472 8.0071 10.4472C7.84729 10.4472 7.68932 10.4399 7.53318 10.4261C6.76076 10.3577 6.01226 10.123 5.33894 9.73837C4.66563 9.3537 4.08341 8.82804 3.63215 8.19741C3.62027 8.18045 3.60427 8.1668 3.58566 8.15772C3.56705 8.14864 3.54644 8.14444 3.52576 8.14551C3.50509 8.14658 3.48502 8.15288 3.46745 8.16383C3.44987 8.17478 3.43537 8.19001 3.42529 8.2081L1.22529 12.162C1.14157 12.3148 1.12843 12.4981 1.21674 12.6472C1.26271 12.7211 1.32674 12.7822 1.40281 12.8245C1.47889 12.8668 1.56448 12.8891 1.65154 12.8892H4.03488C4.1179 12.8861 4.20024 12.9053 4.27339 12.9447C4.34655 12.984 4.40788 13.0422 4.45104 13.1132L5.63232 15.0892C5.67555 15.1625 5.73689 15.2235 5.81046 15.2663C5.88403 15.3091 5.96736 15.3323 6.05246 15.3337C6.23396 15.3236 6.42188 15.2056 6.49735 15.0403L8.51738 10.6052C8.5261 10.5859 8.52967 10.5647 8.52775 10.5437C8.52582 10.5226 8.51846 10.5024 8.50639 10.485C8.49432 10.4677 8.47795 10.4537 8.45888 10.4446C8.43982 10.4354 8.4187 10.4314 8.3976 10.4329Z"
                fill="white" />
              <path
                d="M14.7727 12.1522L12.5871 8.20535C12.577 8.18744 12.5625 8.17236 12.545 8.16152C12.5276 8.15068 12.5077 8.14442 12.4871 8.14332C12.4666 8.14222 12.4461 8.14633 12.4276 8.15525C12.4091 8.16417 12.3931 8.17762 12.3811 8.19435C11.7801 9.0365 10.9494 9.68798 9.98832 10.0711C9.87031 10.1176 9.77485 10.2079 9.72188 10.3232L8.5956 12.8012C8.5811 12.8329 8.57359 12.8672 8.57359 12.902C8.57359 12.9368 8.5811 12.9712 8.5956 13.0029L9.52052 15.0376C9.59538 15.2029 9.78299 15.3236 9.96418 15.3337C10.0494 15.3316 10.1326 15.3076 10.2059 15.2642C10.2791 15.2208 10.3401 15.1593 10.3828 15.0855L11.5601 13.1123C11.6484 12.9641 11.8085 12.8883 11.9812 12.8892H14.388C14.5918 12.8892 14.7461 12.7829 14.8158 12.5837C14.8403 12.5129 14.8491 12.4377 14.8417 12.3632C14.8342 12.2887 14.8107 12.2167 14.7727 12.1522Z"
                fill="white" />
              <path
                d="M8.00832 6.53366C8.81851 6.53366 9.47529 5.87701 9.47529 5.06699C9.47529 4.25697 8.81851 3.60033 8.00832 3.60033C7.19814 3.60033 6.54135 4.25697 6.54135 5.06699C6.54135 5.87701 7.19814 6.53366 8.00832 6.53366Z"
                fill="white" />
              <path
                d="M8.00832 0.666992C5.5816 0.666992 3.60832 2.64058 3.60832 5.06699C3.60832 7.49341 5.58252 9.46699 8.00832 9.46699C10.4341 9.46699 12.4083 7.4931 12.4083 5.06699C12.4083 2.64088 10.4347 0.666992 8.00832 0.666992ZM8.00832 7.51144C7.52486 7.51144 7.05225 7.36807 6.65026 7.09947C6.24827 6.83087 5.93496 6.4491 5.74995 6.00244C5.56494 5.55578 5.51653 5.06428 5.61085 4.5901C5.70517 4.11593 5.93798 3.68037 6.27984 3.33851C6.6217 2.99665 7.05726 2.76384 7.53143 2.66952C8.00561 2.5752 8.49711 2.62361 8.94377 2.80862C9.39043 2.99363 9.7722 3.30694 10.0408 3.70893C10.3094 4.11092 10.4528 4.58353 10.4528 5.06699C10.452 5.71505 10.1942 6.33634 9.73591 6.79458C9.27766 7.25283 8.65638 7.51063 8.00832 7.51144Z"
                fill="white" />
            </svg>
            <span>Nex Success</span>
          </div>
        </div>
      </div>
      <div class="ends_text mt-[11px] flex_row_space">
        <div>
          <span>Ends in</span>
          <span class="time_text">{{ end_time }}</span>
        </div>
        <div class="flex_row">
          <div class="have_been">{{ progress }}% have been Nex</div>
          <span class="ml-[8px] pre_text">{{ nexDetail?.nex_count || 0 }}</span>
          <span class="pre_text1">/{{ nexDetail?.total_count || 0 }}</span>
        </div>
      </div>
    </block>

    <div v-else-if="nexDetail?.nex_status === 4" class="Preparing_view">Preparing for NEX...</div>

    <div v-else-if="nexDetail?.nex_status === 5" class="flex_row_space" @click="buyNow('FINISH')">
      <div>
        <span class="dollor">$</span>
        <span class="money">{{ nexDetail?.percent_price }}</span>
        <span class="des_text ml-[8px]">Shipping and tax calculated at checkout</span>
      </div>
      <div class="price_btn cursor">
        <span>Buy Now</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="25"
          height="24"
          viewBox="0 0 25 24"
          fill="none">
          <path
            d="M21.0954 8.13393C20.9671 8.00057 20.8144 7.89482 20.6462 7.82278C20.4779 7.75075 20.2975 7.71387 20.1154 7.71429H17.3461V7C17.3461 5.67392 16.8356 4.40215 15.9267 3.46447C15.0179 2.52678 13.7853 2 12.5 2C11.2147 2 9.98208 2.52678 9.07325 3.46447C8.16442 4.40215 7.65384 5.67392 7.65384 7V7.71429H4.88461C4.51739 7.71429 4.16521 7.8648 3.90554 8.13271C3.64588 8.40061 3.5 8.76398 3.5 9.14286V18.7857C3.5 20.5268 4.92788 22 6.61538 22H18.3846C19.2009 22.0003 19.9848 21.671 20.5688 21.0826C20.8627 20.7933 21.0968 20.4456 21.2568 20.0604C21.4168 19.6752 21.4996 19.2606 21.5 18.8415V9.14286C21.5006 8.95544 21.4651 8.76977 21.3956 8.59659C21.3262 8.42341 21.2242 8.26615 21.0954 8.13393ZM9.03846 7C9.03846 6.0528 9.40316 5.14439 10.0523 4.47462C10.7015 3.80485 11.5819 3.42857 12.5 3.42857C13.4181 3.42857 14.2985 3.80485 14.9477 4.47462C15.5968 5.14439 15.9615 6.0528 15.9615 7V7.71429H9.03846V7ZM17.3461 11.2857C17.3461 12.6118 16.8356 13.8836 15.9267 14.8212C15.0179 15.7589 13.7853 16.2857 12.5 16.2857C11.2147 16.2857 9.98208 15.7589 9.07325 14.8212C8.16442 13.8836 7.65384 12.6118 7.65384 11.2857V10.5714C7.65384 10.382 7.72678 10.2003 7.85662 10.0664C7.98645 9.9324 8.16254 9.85714 8.34615 9.85714C8.52976 9.85714 8.70585 9.9324 8.83569 10.0664C8.96552 10.2003 9.03846 10.382 9.03846 10.5714V11.2857C9.03846 12.2329 9.40316 13.1413 10.0523 13.8111C10.7015 14.4809 11.5819 14.8571 12.5 14.8571C13.4181 14.8571 14.2985 14.4809 14.9477 13.8111C15.5968 13.1413 15.9615 12.2329 15.9615 11.2857V10.5714C15.9615 10.382 16.0345 10.2003 16.1643 10.0664C16.2941 9.9324 16.4702 9.85714 16.6538 9.85714C16.8375 9.85714 17.0135 9.9324 17.1434 10.0664C17.2732 10.2003 17.3461 10.382 17.3461 10.5714V11.2857Z"
            fill="white" />
        </svg>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" width="580" :show-close="false">
      <div style="position: relative">
        <div class="dialog_left">
          <div class="des1">View the participant list for the NEX initiative.</div>
          <div class="des2 mt-[16px]">
            Participants in NEX are eligible for a 20% discount on their purchases.
          </div>
          <div class="line mt-[16px]"></div>
          <div class="user_list">
            <div
              v-for="item in nexDetail?.nex_user || []"
              :key="item.uid"
              class="flex_row user_item">
              <img class="dia_avatar" :src="item.avatar" alt="" />
              <span class="dia_name ml-[8px]">{{ item.name }}</span>
            </div>
            <div
              v-for="item in nexDetail?.nex_user || []"
              :key="item.uid"
              class="flex_row user_item">
              <img class="dia_avatar" :src="item.avatar" alt="" />
              <span class="dia_name ml-[8px]">{{ item.name }}</span>
            </div>
          </div>
        </div>
        <div class="dialog_right cursor" @click="dialogVisible = false">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none">
            <path
              d="M18.0107 3.86816C18.5965 3.28245 19.546 3.28259 20.1318 3.86816C20.7176 4.45395 20.7176 5.40347 20.1318 5.98926L14.1211 11.999L20.1318 18.0098C20.7176 18.5956 20.7176 19.5451 20.1318 20.1309C19.546 20.7166 18.5965 20.7166 18.0107 20.1309L12 14.1201L5.99023 20.1309C5.40445 20.7166 4.45492 20.7166 3.86914 20.1309C3.28351 19.5451 3.28341 18.5955 3.86914 18.0098L9.87891 11.999L3.86914 5.98926C3.28346 5.40346 3.28339 4.45392 3.86914 3.86816C4.45489 3.28241 5.40444 3.28248 5.99023 3.86816L12 9.87793L18.0107 3.86816Z"
              fill="#CBCBCB" />
          </svg>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { formatTimeDiffWithMoment } from '@/utils/tools';
  import moment from 'moment';
  import { NexAPI, NexParams } from '@/api/nex';
  import { ElMessage } from 'element-plus';

  const route: any = useRoute();
  const emit = defineEmits(['refreshNexDetail']);
  const props = defineProps({
    nexDetail: { type: Object, default: () => {} },
  });
  const nex_user = computed(() => {
    let list = props?.nexDetail?.nex_user || [];
    if (list.length > 5) {
      const end = {
        uid: 'end',
        name: `+${list.length - 5 > 99 ? 99 : list.length - 5}`,
        isShowNum: true,
      };
      list = list.slice(0, 5);
      list.push(end);
    }
    return list;
  });
  const end_time = computed(() => {
    const currentTime = moment().format('YYYY-MM-DD HH:mm:ss');
    return formatTimeDiffWithMoment(currentTime, props.nexDetail?.end_time);
  });
  const progress = computed(() => {
    const { nex_count, total_count } = props.nexDetail || {};
    if (nex_count === total_count) return 100;
    return Math.floor((nex_count / total_count) * 100);
  });
  const dialogVisible = ref<boolean>(false);

  onMounted(() => {});

  const buyNow = async (type: 'NEX' | 'FINISH') => {
    // nex进行
    emit('refreshNexDetail', type);
  };
</script>

<style scoped lang="scss">
  .nex_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .cursor {
      cursor: pointer;
    }
    .flex_row_space {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .flex_row {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .price_btn {
      display: flex;
      width: 200px;
      height: 40px;
      padding: 4px 10px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      color: var(---0, #fff);
      font-family: 'Inter Tight';
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      border-radius: 8px;
      background: var(---, linear-gradient(90deg, #f76b1b 0%, #dc3a0e 100%));
      backdrop-filter: blur(2px);
    }
    .Preparing_view {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 400px;
      padding: var(--Number-5, 16px) 24px;
      color: var(---, #f76b1b);
      border-radius: 8px;
      background: var(---1, #f8f8f8);
      font-family: 'Inter Tight';
      font-size: 20px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      margin: 0 auto;
    }
    .dialog_left {
      .user_list {
        max-height: 560px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: scroll;
        //justify-content: space-between;
      }
      .user_item {
        width: 33.3%;
        //background: #3b82f6;
        //width: 150px;
        margin-top: 18px;
      }
      .dia_avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      .dia_name {
        color: var(---9, #222);
        font-family: 'Inter Tight';
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        white-space: nowrap; /* 强制文本在一行显示，不换行 */
        overflow: hidden; /* 超出容器的部分隐藏 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        max-width: 120px;
      }
      .des1 {
        color: var(---9, #222);
        font-family: 'Inter Tight';
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
      }
      .des2 {
        color: var(---6, #7a7a7a);
        font-family: 'Inter Tight';
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
      .line {
        height: 1px;
        width: 100%;
        background: #e1e2e3;
      }
    }
    .dialog_right {
      width: 24px;
      position: absolute;
      right: -45px;
      top: -30px;
    }
    .retail_price {
      color: #222;
      font-weight: 600;
    }
    .off_view {
      display: flex;
      padding: 2px 4px;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      background: var(---2, #ededed);
      color: var(---, #f76b1b);
      font-family: 'Inter Tight';
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .des_text {
      color: var(---6, #7a7a7a);
      font-family: 'Inter Tight';
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
    .dollor {
      color: var(---9, #222);
      font-family: 'Inter Tight';
      font-size: 23px;
      font-style: normal;
      font-weight: 600;
      margin-top: 5px;
    }
    .money {
      color: var(---9, #222);
      font-family: 'Inter Tight';
      font-size: 32px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
    }
    .num_view {
      width: 22px;
      height: 22px;
      background: #222;
      color: var(---0, #fff);
      font-family: 'Inter Tight';
      font-size: 10px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1px solid var(---0, #fff);
      background: url(<path-to-image>) lightgray 50% / cover no-repeat;
      border: 1px solid var(---0, #fff);
    }
    .pre_text {
      color: var(---, #f76b1b);
      font-family: 'Inter Tight';
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .pre_text1 {
      color: var(---9, #222);
      font-family: 'Inter Tight';
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .have_been {
      display: flex;
      padding: 4px 16px;
      border-radius: 4px;
      background: var(---2, #ededed);
      justify-content: center;
      align-items: center;
      gap: 10px;
      color: var(---9, #222);
      font-family: 'Inter Tight';
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .progress_container {
      width: 100%;
      margin-top: 13px;
    }

    .progress_bg {
      height: 8px; /* 进度条高度 */
      background-color: #d9d9d9; /* 背景色 */
      border-radius: 4px; /* 圆角 */
      position: relative;
    }

    .process_icon {
      position: absolute;
      width: 24px;
      height: 24px;
      top: -8px;
    }
    .progress_success {
      position: absolute;
      right: 0;
      display: flex;
      height: 24px;
      padding: 5px 8px;
      align-items: center;
      justify-content: center;
      top: -8px;
      gap: 4px;
      flex-shrink: 0;
      border-radius: 12px;
      background: var(---, #52c41a);
      color: var(---0, #fff);
      font-family: 'Inter Tight';
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }

    .progress_fill {
      height: 100%;
      //border-radius: 4px;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      background-color: #222; /* 进度条颜色 */
      transition: width 0.3s ease; /* 过渡动画 */
    }

    .time_text {
      color: var(---9, #222);
      margin-left: 8px;
    }
    .ends_text {
      color: var(---6, #7a7a7a);
      font-family: 'Inter Tight';
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .coming_soon {
      display: flex;
      width: 160px;
      height: 40px;
      padding: 4px 10px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      border-radius: 8px;
      background: var(---4, #cbcbcb);
      backdrop-filter: blur(2px);
      color: var(---0, #fff);
      font-family: 'Inter Tight';
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .nex_btn {
      display: flex;
      width: 160px;
      height: 40px;
      padding: 4px 10px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      border-radius: 8px;
      background: var(---, linear-gradient(90deg, #f76b1b 0%, #dc3a0e 100%));
      backdrop-filter: blur(2px);
      color: var(---0, #fff);
      font-family: 'Inter Tight';
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
  }
</style>
